{% extends "editor/state_editor_row.html" %}

{% block cls %}oppia-interactive-widget-display{% endblock %}

{% block center %}
  <div>
    <div ng-if="!interactiveWidgetEditorIsShown">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div angular-html-bind="widgetPreviewHtml" class="oppia-preview"></div>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1">
          <button type="button" class="btn btn-default btn-xs pull-right" ng-click="showInteractiveWidgetEditor()" ng-if="editabilityService.isEditable()">
            <span class="glyphicon glyphicon-pencil" title="Edit Interaction"></span>
          </button>
        </div>
      </div>
    </div>

    <div ng-if="interactiveWidgetEditorIsShown" style="margin: 10px; padding: 10px; border: 1px solid black;">
      <h5>
        <strong>Interaction Editor</strong>
      </h5>

      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <accordion close-others="true">
            <accordion-group heading="<[category]>" ng-repeat="(category, widgetList) in interactiveWidgetRepository" is-open="category === 'Basic Input'">
              <div ng-repeat="widget in widgetList" ng-click="setNewTmpWidget(widget)" ng-class="widget.widget_id != tmpWidget.widget_id ? 'oppia-unselected-accordion-item': 'oppia-selected-accordion-item'">
                <[widget.name]>
              </div>
            </accordion-group>
          </accordion>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">
          <div ng-show="tmpWidget">
            <accordion close-others="true">
              <accordion-group is-open="true">
                <accordion-heading>
                  <!-- Due to how ui.bootstrap.accordion is set up, the manipulation of margin and padding is (unfortunately) necessary for the click target to cover the whole heading. -->
                  <a style="width: 100%; margin: -8px -15px; padding: 8px 15px;" ng-click="generateTmpWidgetPreview()" href="#">
                    Preview
                  </a>
                </accordion-heading>
                <div class="oppia-preview">
                  <div angular-html-bind="tmpWidget.tag"></div>
                </div>
              </accordion-group>

              <div ng-if="!isEmpty(tmpWidget.params)">
                <accordion-group>
                  <accordion-heading>
                    <a href="#">Customize</a>
                  </accordion-heading>
                  <div ng-repeat="(paramName, paramSpecDict) in tmpWidget.params">
                    <strong><[tmpWidget.params[paramName].description]></strong>
                    <value-generator-editor generator-id="paramSpecDict.generator_id"
                                            init-args="paramSpecDict.init_args"
                                            customization-args="tmpWidget.customization_args[paramName]"
                                            obj-type="paramSpecDict.obj_type">
                    </value-generator-editor>
                    <br>
                  </div>
                </accordion-group>
              </div>
            </accordion>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="pull-right" ng-if="tmpWidget">
            <button type="button" class="btn btn-default" ng-click="resetInteractiveWidgetEditor()">
              Cancel
            </button>
            <button type="button" class="btn btn-success" ng-click="selectInteractiveWidget(tmpWidget)">
              Use this interaction
            </button>
          </span>
        </div>
      </div>

    </div>
  </div>
{% endblock %}
